<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
    String path = request.getContextPath();
			String basePath = request.getScheme() + "://"
					+ request.getServerName() + ":" + request.getServerPort()
					+ path + "/";
%>
<!DOCTYPE html>
<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
<%@ include file="/common/common-css.jsp"%>
<style>
#jquery-table td {
	cursor: pointer !important
}

.load_bg {
	background: #000;
	opacity: 0.1;
	left: 0px;
	top: 0px;
	position: fixed;
	height: 100%;
	width: 100%;
	overflow: hidden;
	z-index: 10000;
}

.load_img {
	left: 50%;
	top: 180px;
	position: fixed;
	height: 50px;
	overflow: hidden;
	z-index: 20000;
}
</style>
<link rel="stylesheet" href="${ctx}/ace/css/just-tip.css" />
</head>
<body class="no-skin">
	<div class="load_bg" style="display: none;"></div>
	<img src="http://img.xmiles.cn/commentloading.gif" class="load_img"
		style="display: none" />
	<div class="page-content">
		<div class="page-header"
			style="margin-bottom: 0px; padding-bottom: 10px;">
			<h1 id="fu_name"></h1>
		</div>
		<form id="queryForm" method="post">
			<div class="page-content-area">
				<div class="row">
					<div class="col-sm-12">
						<div class="widget-box"
							style="border: 0px solid #ccc; border-top: none; border-bottom: none;">
							<div class="widget-header widget-header-blue widget-header-flat">
								<h4 class="widget-title">贷款之家用户arpu表</h4>
								<div class="widget-toolbar">
									<a href="#" data-action="collapse"> <i
										class="ace-icon fa fa-chevron-up"></i>
									</a>
								</div>
							</div>
							<div class=" widget-body">
								<div class="widget-main">
									<div class="form-group col-xs-12 col-sm-4 col-md-3 col-lg-3">
										<label class="col-sm-4 control-label" style="text-align: left"
											for="sex">开始日期:</label>
										<div class="col-sm-8">
											<div class="input-daterange input-group">
												<input type="text" data-date-format="yyyy/mm/dd" class="date-picker input-sm form-control"
												  style="padding-left: 0px" id="startTime" name="startTime">
											</div>
										</div>
									</div>
									
									<div class="form-group col-xs-12 col-sm-4 col-md-3 col-lg-3">
										<label class="col-sm-4 control-label" style="text-align: left"
											for="sex">结束日期:</label>
										<div class="col-sm-8">
											<div class="input-daterange input-group">
												<input type="text" data-date-format="yyyy/mm/dd" class="date-picker input-sm form-control"
												  style="padding-left: 0px" id="endTime" name="endTime">
											</div>
										</div>
									</div>

									<div class="form-group col-xs-12 col-sm-4 col-md-3 col-lg-3">
										<label class="col-sm-6 control-label"
											style="text-align: right" for="sex">平台:</label>
										<div class="col-sm-6">
											<select name="platform" class="form-control">
												<option value="">请选择</option>
												<option value="android">Android</option>
												<option value="ios">IOS</option>
											</select>
										</div>
									</div>
									<div class="form-group col-xs-12 col-sm-4 col-md-3 col-lg-3">
										<label class="col-sm-6 control-label"
											style="text-align: right" for="sex">产品:</label>
										<div class="col-sm-6">
											<select name="prdid" class="form-control">
												<option value="">请选择</option>
												<option value="-1">车主无忧</option>
												<option value="8000">贷款之家</option>
											</select>
										</div>
									</div>
									<div class="form-group col-xs-12 col-sm-4 col-md-3 col-lg-3">
										<label class="col-sm-6 control-label"
											style="text-align: left">渠道:</label>
										<div class="col-sm-6" style="margin-left: -65px;">
											<select id="channel" name="channel" class="form-control"></select>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-md-12 center">
					<div class="clearfix form-actions">
						<button class="btn btn-purple  no-border" type="button"
							name="btn-query" onclick="query_any()" id="btn-query">
							<i class="ace-icon fa fa-search icon-on-right bigger-110"></i> 查询
						</button>
						&nbsp;&nbsp;&nbsp;
						<button class="btn btn-grey  no-border" type="reset">
							<i class="ace-icon fa fa-undo icon-on-right bigger-110"></i> 重置
						</button>
					</div>
				</div>
			</div>
		</form>
		<div class="row">
			<div class="col-xs-12">
				<table id="jquery-table"
					class="table table-striped table-bordered table-hover">
				</table>
			</div>
		</div>
	</div>
	<%@ include file="/common/common-js.jsp"%>
	<script type="text/javascript" src="${ctx}/js/common-loading.js"></script>
	<script type="text/javascript" src="${ctx}/js/call_func.js"></script>
	<script type="text/javascript" src="${ctx}/ace/js/jquery.dataTables.min.js"></script>
	<script src="${ctx}/ace/js/justTools.js"></script>
	<script type="text/javascript">
	    
	    var souceList = null;
		var jqTable = null;
		
		//查询渠道列表
		function loadChannel() {
			$.ajax({
				type : 'POST',
				dataType : 'json',
				url : ctx + "/channel/channelList.action?rand=" + Math.random(),
				timeout : 300000,
				beforeSend : function() {
					// 显示loading
					showLoading();
				},
				success : function(resp) {
					hideLoading();
					var data = resp["aaData"];
					var channelHtml = '<option value="">请选择</option>';
					for (var i = 0; i < data.length; i++) {
						channelHtml += '<option value="'+data[i]["channel_code"]+'">'
								+ data[i]["channel_name"] + '</option>';
					}
					$("#channel").html(channelHtml);
				},
				error : function(XMLHttpRequest, textStatus, errorThrown) {
					alert('请求服务器错误,请刷新重试！！');//错误提示，包括服务器重启导致的session失效
				},
				complete : function() {
					hideLoading();
				}
			});
		}
		
		$(document).ready(function() {
			//时间范围插件初始化
			$('.date-picker').datepicker({
				autoclose : true,
				format : 'yyyy-mm-dd'
			});
			loadChannel();
		});
		
		//【查询】按钮Click事件
		function query_any() {
			if (jqTable != null) {
				jqTable.fnDraw();
			} else {
				loaddata();
			}
		}
		var loaddata = function() {
			jQuery(function($) {
				jqTable = $('#jquery-table').dataTable(
				{
					//数据列控制（包括对应返回JSON属性名称，对应表头列索引位置、数据转换封装等）
					"columnDefs" : [{
						"title" : "日期",
						"name" : "date",
						"data" : "date",
						"targets" : [ 0 ],
						"bSortable" : true,
					}, 
					{
						"title" : "平台",
						"name" : "platform",
						"data" : "platform",
						"targets" : [ 1 ],
						"bSortable" : false,
					}, 
					{
						"title" : "产品",
						"name" : "prdid",
						"data" : "prdid",
						"targets" : [ 2 ],
						"bSortable" : false,
						"render": function(value, type, row) {
	                   		 if(value == -1){
								  return "车主无忧";
							 }else if(value == 8000){
								  return "贷款之家";
							 }else{
								  return value;
							 }				 
						 },
					},
					{
						"title" : "渠道",
						"name" : "channel",
						"data" : "channel",
						"targets" : [ 3 ],
						"bSortable" : false,
					},
					{
						"title" : "新增用户数",
						"name" : "new_user",
						"data" : "new_user",
						"targets" : [ 4 ],
						"bSortable" : true,
					},
					{
						"title" : "1天ARPU值",
						"name" : "averagearpu",
						"data" : "averagearpu",
						"targets" : [ 5 ],
						"bSortable" : true,
					}, 
					{
						"title" : "7天ARPU值",
						"name" : "averagearpu7",
						"data" : "averagearpu7",
						"targets" : [ 6 ],
						"bSortable" : true,
					}, 
					{
						"title" : "14天ARPU值",
						"name" : "averagearpu14",
						"data" : "averagearpu14",
						"targets" : [ 7 ],
						"bSortable" : true,
					}, 
					{
						"title" : "1个月arpu值",
						"name" : "averagearpu30",
						"data" : "averagearpu30",
						"targets" : [ 8 ],
						"bSortable" : true,
					}, 
					{
						"title" : "2个月arpu值",
						"name" : "averagearpu60",
						"data" : "averagearpu60",
						"targets" : [ 9 ],
						"bSortable" : true,
					}],
					"sAjaxSource" : ctx + "/arpu/queryARPUStatistics.action",//数据源URL
					"fnServerData" : function(sSource, aoData,fnCallback) {  //从服务器请求数据
						var data = $('#queryForm').serializeObject();
						data.aoData = JSON.stringify(aoData);
						$.ajax({
							"type" : "POST",
							"dataType" : 'json',
							"url" : sSource,
							"data" : data,
							beforeSend : function() {
								$(".load_bg").removeAttr("style");
								$(".load_img").removeAttr("style");
							},
							"success" : function(resp) {
								$(".load_bg").attr("style","display:none");
								$(".load_img").attr("style","display:none");
								$("#hidden_pass").attr("style","display:block");
								$('#jquery-table').removeClass("dataTable");
								fnCallback(resp);
								initListPage();
							},
							"error" : function(XMLHttpRequest,
									textStatus, errorThrown) {
								$(".load_bg").attr("style","display:none");
								$(".load_img").attr("style","display:none");
								alert('请求服务器错误,请刷新重试！！');//错误提示，包括服务器重启导致的session失效
							}
						});
					},
					"fnRowCallback" : function(nRow, aData,
							iDisplayIndex, iDisplayIndexFull) {
						nRow.ondblclick = function() {
						}
					},
					"bDestroy" : true,
					"bScrollInfinite" : true,
					"sScrollXInner" : "100%",
					"sScrollY" : "100%",//如果不设置，IE会有问题
					"aaSorting" : [ [ 0, "desc" ] ]
				//初始化加载，默认按第几列排序、排序方式（列从0开始计算)
				});
			});
		}

		//时间控件
		jQuery(function($) {
			$(".date-picker").datepicker({
				autoclose : true
			}).next().on(ace.click_event, function() {
				$(this).prev().focus();
			});
		});
	</script>
</body>
</html>